<!--
 * @Author: chenli 604089679@qq.com
 * @Date: 2023-12-11 10:34:25
 * @LastEditors: chenli 604089679@qq.com
 * @LastEditTime: 2024-01-01 16:17:11
 * @FilePath: \vue3\src\views\tripartitelibrary\excelTest\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :on-change="handleChange"
      :auto-upload="false"
      style="width: 200px"
    >
      <el-button type="primary">选择文件</el-button>
    </el-upload>
    <el-button
      type="primary"
      v-if="tableData && tableData.length > 0"
      :disabled="selectData.length < 1"
      @click="toDetail"
      >生成送货单</el-button
    >
    <div
      style="width: 100%; margin-top: 30px; height: 600px"
      v-if="tableData && tableData.length > 0"
    >
      <el-table
        border
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" label="序号" />
        <el-table-column prop="购买方名称" label="购买方名称" />
        <el-table-column prop="货物或应税劳务名称" label="货物或应税劳务名称" />
        <el-table-column prop="单位" label="单位" />
        <el-table-column prop="单价" label="单价" />
        <el-table-column prop="数量" label="数量" />
        <el-table-column prop="金额" label="金额" />
        <el-table-column prop="价税合计" label="价税合计" />
        <!-- <el-table-column>
          <template #default="scope">
            <el-button @click="printOrder(scope.row)">打印</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <InvoiceDialog ref="printOrederRef"></InvoiceDialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import * as XLSX from "xlsx";
import InvoiceDialog from "./components/InvoiceDialog.vue";

let fileTemp = ref(null);
let tableData = ref([]);
let indexList = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
];
/**
 * 改变文件
 */
const handleChange = (file: any, fileList: any) => {
  fileTemp.value = file.raw;
  if (fileTemp.value) {
    if (
      fileTemp.value.type ==
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
      fileTemp.value.type == "application/vnd.ms-excel"
    ) {
      importfxx(fileTemp.value);
    } else {
      ElMessage.warning({
        type: "warning",
        message: "附件格式错误，请删除后重新上传！",
      });
    }
  } else {
    ElMessage.warning({
      type: "warning",
      message: "请上传附件！",
    });
  }
};

/**
 * 导入文件
 */
const importfxx = (val: any) => {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: "array" });
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    tableData.value = getDataByIndexArray(jsonData, indexList);
    console.log(tableData.value);
  };
  reader.readAsArrayBuffer(val);
};

/**
 * 整理的数据
 * @param data
 * @param indexArray
 */
function getDataByIndexArray(data, indexArray) {
  const result = [];

  for (let i = 1; i < data.length; i++) {
    const row = data[i];
    const rowData = {};

    for (let j = 0; j < indexArray.length; j++) {
      const index = indexArray[j];
      rowData[data[0][index]] = row[index];
    }

    result.push(rowData);
  }

  return result;
}
let printOrederRef = ref();
/**
 * 打印预览发货单
 */
const printOrder = (val: any) => {
  printOrederRef.value.init(val);
};

//选中的数据
let selectData: any = ref([]);
/**
 * 选择多个
 * @param val
 */
const handleSelectionChange = (val: any) => {
  console.log("多个数据：", val);
  selectData.value = val;
};

const router = useRouter();
/**
 * 跳转详情
 */
const toDetail = () => {
  console.log(JSON.stringify(selectData.value));

  router.push({
    path: "/ExcelDetail",
    query: { selectData: JSON.stringify(selectData.value) },
  });
};

/**************** 导入未完成的发货单 *****************/

const handleImportFileChange = () => {

};
</script>

<style scoped>
.item {
  width: 800px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>
